<template>
 <div class="article_manage pd_40">
   <div>
     <el-row :gutter="70">
      <el-col :span="7">
        <div class="fsc">
          <span class="articlelist_lable">文章名称</span>
          <el-input
            placeholder="请输入"
            v-model.trim="tableData.title">
          </el-input>
        </div>
      </el-col>
      <el-col :span="8" class="fsc">
        <span class="articlelist_lable">发布时间</span>
        <div class="fsc">
          <div>
            <el-date-picker
              class="articlelist_lable_time"
              v-model="tableData.start"
              v-on:change = 'upDateTime'
              type="datetime"
              placeholder="选择日期时间">
            </el-date-picker>
          </div>
          <span>-</span>
          <div>
            <el-date-picker
              class="articlelist_lable_time"
              v-on:change = 'upDateTime'
              v-model="tableData.end"
              type="datetime"
              placeholder="选择日期时间">
            </el-date-picker>
          </div>
        </div>
      </el-col>
      <el-col :span="7">
        <div class="fsc">
          <span class="articlelist_lable">审核状态</span>
          <el-select v-model="tableData.status">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
      </el-col>

      <el-col class='mg_t20' :span="7">
        <div class="fsc">
          <span class="articlelist_lable">作者</span>
          <el-input
            placeholder="请输入"
            v-model.trim="tableData.userName">
          </el-input>
        </div>
      </el-col>
      <el-col class='mg_t20' :span="8">
        <div class="fsc">
          <span class="articlelist_lable">分属版块</span>
            <el-select v-model="tableData.categoriesId">
              <el-option value="" label="全部"></el-option>
              <el-option
                v-show="item.id !== 7"
                v-for="(item,index) in plate"
                :key="index"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
        </div>
      </el-col>
      <el-col class='mg_t20' :span="7">
        <div class="fsc">
          <span class="articlelist_lable">有无指南</span>
             <el-select v-model="tableData.grade_status">
              <el-option value="3" label="全部"></el-option>
              <el-option :value="1" label="有"></el-option>
              <el-option :value="0" label="无"></el-option>
            </el-select>
        </div>
      </el-col>
     </el-row>
     <p class="articlelist_query fec">
      <el-button @click="reset">重置</el-button>
      <el-button @click="getList('query')" type="primary">查询</el-button>
    </p>
   </div>
   <div>
     <el-table
      :data="tableList"
      stripe
      style="width: 100%">
      <el-table-column
        prop="title"
        label="文章名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="userName"
        align="center"
        label="作者">
      </el-table-column>
      <el-table-column
        prop="images.length"
        label="封面图片"
        align="center"
        width="130">
      </el-table-column>
      <el-table-column
        prop="contentSize"
        label="内容图片"
        align="center"
        width="130">
      </el-table-column>
      <el-table-column
        label="分属版块">
        <template slot-scope="scope">
          <span>{{scope.row.categories.length==0?"--":scope.row.categories.name}}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="有无指南">
        <template slot-scope="scope">
          <span>{{scope.row.grade_status==2?'有':'无'}}</span>
        </template>
      </el-table-column>
      <el-table-column
        align='center'
        prop="updatetime"
        label="更新时间">
      </el-table-column>
      <el-table-column
        align='center'
        label="审核状态">
        <template slot-scope="scope">
          <span :class="scope.row.status==4?'c_red':''">{{isStatus1(scope.row.status)}}</span>
        </template>
      </el-table-column>
      <el-table-column
        width="180"
        prop="address"
        label="操作">
        <template slot-scope="scope">
        <el-button @click="preview(scope)" type="primary" size="small">预览</el-button>
        <el-button v-if="scope.row.status!==5&&scope.row.status!==2" @click="administration(scope)" type="success" size="small">管理</el-button>
      </template>
      </el-table-column>
    </el-table>
   </div>
  <div class="block fec mg_t30">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      :page-sizes="[10]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>

  <!--点击管理alert-->
  <el-dialog
    title="文章审核"
    :visible.sync="centerDialogVisible"
    width="600px"
    center>
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="fsc">
          <p>文章标题:</p>
          <p class="mg_l15">{{ dialog.title }}</p>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="fsc">
          <p>配图数:</p>
          <p class="mg_l15">{{centerDialogVisible?dialog.images+dialog.scope.row.contentSize:''}}</p>
        </div>
      </el-col>
      <el-col class="mg_t30" :span="12">
        <div class="fsc">
          <p>发布时间:</p>
          <p class="mg_l15">{{dialog.updatetime}}</p>
        </div>
      </el-col>
      <el-col class="mg_t30" :span="12">
        <div class="fsc">
          <p>作者:</p>
          <p class="mg_l15">{{dialog.userName}}</p>
        </div>
      </el-col>
      <el-col class="mg_t30" :span="12">
        <div class="fsc">
          <p>当前审核状态:</p>
          <p class="mg_l15">{{dialog.status}}</p>
        </div>
      </el-col>
      <el-col class="mg_t30" :span="12">
        <div class="fsc">
          <p>审核人:</p>
          <p class="mg_l15">wu</p>
        </div>
      </el-col>
      <el-col class="mg_t40" :span="24">
        <div class="fbc fwrap">
          <el-button @click="index=1" :type="primary=index==1?'primary':''">预览</el-button>
          <el-button :disabled="dialog.statusNum==4||dialog.statusNum==3?false:true" @click="index=2" :type="primary=index==2?'primary':''">通过/准予展览</el-button>
          <el-button :disabled="dialog.statusNum==4?false:true" @click="index=3" :type="primary=index==3?'primary':''">驳回修改</el-button>
          <el-button :disabled="dialog.statusNum==1?false:true" @click="index=4" :type="primary=index==4?'primary':''">文章下架</el-button>
        </div>
      </el-col>
      <el-col v-if="index==2" class="mg_t40" :span="24">
        <div class="fsc">
          <p>分属:</p>
          <el-select class="mg_l15" v-model="plateValue" placeholder="全部">
            <el-option
              v-show="item.id!=7"
              v-for="item in plate"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </div>
      </el-col>
      <el-col class="mg_t40" :span="24">
        <div v-show="plateValue==6&&index==2" class="fbc fwrap">
          <el-button :type="primary=index1==1?'primary':''" @click="index1=1">风景摄影</el-button>
          <el-button :type="primary=index1==2?'primary':''" @click="index1=2">历史故事</el-button>
          <!--<el-button :type="primary=index1==3?'primary':''" @click="index1=3">新闻热点</el-button>-->
          <el-button :type="primary=index1==3?'primary':''" @click="index1=3">文学艺术</el-button>
        </div>
      </el-col>
    </el-row>
    <span slot="footer" class="dialog-footer">
      <el-button @click="centerDialogVisible = false">取消</el-button>      
      <el-button type="primary" @click="determine">确定</el-button>
    </span>
  </el-dialog>
 </div>

 
</template>
<script>
export default {
  data() {
    return {
      tableList: [], //表格数据
      tableData: {   //表格参数
        type: 2,
        title: '',
        updatetime: '',
        status: '',
        userName: '',
        start: '',
        end: '',
        categoriesId: '',
        grade_status: '3',
        page: '',
      }, 
      currentPage: 1, //默认显示页
      total: null,   //列表总数据
      dialog: {},  //弹窗数据
      index: 1,  //dialog里按钮
      index1: 1,
      plateValue: '', //dialog里分属板块
      plate: [], //分属板块下拉数据

      centerDialogVisible: false,
      options: [                     //审核状态下拉
        { value: null,label: '全部'}, 
        {value: '5',label: '草稿'}, 
        {value: '1',label: "审核通过"}, 
        {value: '2',label: '驳回修改'}, 
        {value: '3',label: '已下架'},
        {value: '4',label: '待审核'},
      ],
    }
  },
  created() {
    this.getList();
    this.getPlate()
  },

  methods: {
    reset() {       //重置
      this.tableData.title='';
      this.tableData.userName='';
      this.tableData.categoriesId='';
      this.tableData.start='';
      this.tableData.end='';
      this.tableData.grade_status='',
      this.tableData.status='';
      this.getList('query');
    },
    upDateTime() {
      if(this.tableData.end) {
        if(this.tableData.start - this.tableData.end > 0) {
          this.$message.error('时间输入错误')
        }
      }
    },
    determine() {       //管理dislog确定
      let url = '/admin/article/reviewed';
      let status;
      let categoriesId;
      let land = this.index1
      if(this.index==2) {
        status = 1
      }else if(this.index==4) {
        status = 3
      }else if(this.index==3) {
        status = 2
      }
      let data = { id:this.dialog.id, status, categoriesId:this.plateValue,landmark: land,};
      if(status == 1 && this.plateValue == '') {
        this.$message.error('请选择分属板块')
      }else {
        this.$request.post(url,data).then(res=> {
          console.log(res)
          if(res.data.code=='0000') {
            this.$message({
              type: 'success',
              message: '操作成功'
            });
            this.centerDialogVisible = false;
            this.getList();
          }else {
            this.$message.error('操作失败')
          }
        }).catch(err=> {
          console.log(err)
        })
      }
     
    },
    isStatus1(status) {
      console.log(status)
      if(status == 5) {
        return '草稿'
      }else if(status == 1) {
        return '审核通过'
      }else if(status == 2) {
        return '驳回修改'
      }else if(status == 3) {
        return '已下架'
      }else if(status == 4) {
        return '待审核'
      }
    },
    preview(scope) {        //预览
      console.log(scope)
      console.log(this.createtime)
      let url = '/admin/article/details';
      let data = { id:scope.row.id, title:scope.row.title, images:scope.row.images,content:[] };
      this.$request.get(url,data).then(res=> {
        console.log(res)
        if(res.data.code=="0000") {
          console.log(222)
        }
      })
    },

    administration(scope) {   //点击管理
      let row = scope.row;
      this.dialog.id = row.id;
      this.dialog.scope = scope;
      this.dialog.title = row.title;
      this.dialog.images = row.images.length;
      this.dialog.updatetime = row.updatetime;
      this.dialog.userName = row.userName;
      this.dialog.statusNum = scope.row.status;
      this.dialog.status = this.$utils.isStatus(row.status);
      this.centerDialogVisible = true;
      console.log(this.dialog.statusNum)
    },
   
    getPlate() {      //分属板块下拉数据
      let url = '/admin/article/getCategories';
      let data = {};
      this.$request.get(url,data).then(res=> {
        console.log(res.data);
        this.plate = res.data.data;
      }).catch(err=> {
        console.log(err)
      })
    },
    handleSizeChange(val) {  
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {      //分页加载其他分页               
      this.tableData.page = val;
      this.getList()
    },
    addPrimary(index) {
      console.log(index)
    },
    getList(label) {       //获取表格列表
      if(label == 'query') {
        this.tableData.page = 1; 
        this.currentPage = 1;
      }
      this.tableData.start = !this.tableData.start==''?Number(this.tableData.start):'';
      this.tableData.end = !this.tableData.end==''?Number(this.tableData.end):'';
      let url = '/admin/article/query';
      let data = this.tableData;
      this.$request.get(url, data).then((res)=> {
        console.log(res);
        this.tableList = res.data.data.list;
        this.total = res.data.data.page.total;
      }).catch(err=> {
        console.log(err)
      })
    }
  },
}
</script>
<style scoped lang="less">
  .articlelist_lable {
    min-width: 20%;
    white-space: nowrap;
  }
  .articlelist_query {
    margin-right: 100px;
    height: 100px;
  }
</style>




